.box {
   position: relative;
   top: 0;
   opacity: 1;
   float: left;
   padding: 60px 50px 40px 50px;
   width: 100%;
   background: #fff;
   border-radius: 10px;
   transform: scale(1);
   -webkit-transform: scale(1);
   /*-ms-transform: scale(1);*/
   z-index: 5;
}

.box.back {
   transform: scale(.95);
   -webkit-transform: scale(.95);
   /*-ms-transform: scale(.95);*/
   top: -20px;
   opacity: .8;
   z-index: -1;
}

.title {
   width: 100%;
   float: left;
   line-height: 46px;
   font-size: 34px;
   font-weight: 700;
   letter-spacing: 2px;
   color: #ED2553;
   position: relative;
}

.title:before {
   content: "";
   width: 5px;
   height: 100%;
   position: absolute;
   top: 0;
   left: -50px;
   background: #ED2553;
}

#code{
   width: 60%;
/*   边框只留下边框的60%*/
}
.input img{
   width: 40%;
/*   去掉边框*/
}


.input,
.input label,
.input input,
.input .spin,
.button,
.button button {
   width: 100%;
   float: left;
}
.input .codelabel{
   width: 55%;
   float: left;
}
.input,
.button {
   margin-top: 30px;
   height: 70px;
}

.input,
.input input,
.button,
.button button {
   position: relative;
}
/*对input边框的设计*/
.input input {
   height: 50px;
   top: 10px;
   border: none;
   background: transparent;
}

.input input,
.input label,
.button button {
   font-family: 'Roboto', sans-serif;
   font-size: 24px;
   color: rgba(0, 0, 0, 0.8);
   font-weight: 300;
}

.input:before,
.input .spin {
   width: 100%;
   height: 1px;
   position: absolute;
   bottom: 0;
   left: 0;
}
/*背景的那个span条*/
.input:before {
   content: "";
   background: rgba(0, 0, 0, 0.1);
   z-index: 3;
}
/*.inputCode:before{*/
/*   width: 55%;*/
/*}*/

/*点击后的下边框红条*/
.input .spin {
   background: #ED2553;
   z-index: 4;
   width: 0;
}


/*调整label【提示输入内容】的位置，*/
.input label {
   position: absolute;
   top: 10px;
   left: 0;
   z-index: 2;
   cursor: pointer;
   line-height: 60px;
}

/*login按钮的调整*/
.button.login {
   width: 60%;
   left: 20%;
}

.register{
   /*   边框只有下面，加粗红色*/
   border: 1px solid  #ED2553;
   width: 80%;
   /*input居中*/
   left: 10%;
   /*border-bottom: 8px solid #ED2553;*/
}

.register:hover{
/*   边框只有下面，加粗红色*/
   border: 1px solid  #ED2553;
   border-bottom: 8px solid #ED2553;
}
/*
   鼠标悬浮到注册出现粗线，没实现
*/
/*.register {
   !* 基础样式 *!
   border: 1px solid #ED2553;
   position: relative; !* 为伪元素定位做准备 *!
}

.register::after {
   !* 伪元素初始状态 *!
   content: ''; !* 伪元素必须有内容 *!
   display: block;
   position: absolute;
   bottom: -8px; !* 位于按钮下方 *!
   left: 100%; !* 初始时在右侧 *!
   height: 8px; !* 边框厚度 *!
   width: 0; !* 初始宽度为0 *!
   background-color: #ED2553; !* 红色边框颜色 *!
   transition: width 0.3s ease-out; !* 动画效果 *!
}

.register:hover::after {
   !* 鼠标悬浮时的伪元素样式 *!
   left: 0; !* 向左展开 *!
   width: 100%; !* 展开至全宽 *!
}*/


/* 对登录注册按钮的样式字样修饰*/
.button.login button,
.button button
{
   width: 100%;
   line-height: 64px;
   left: 0%;
   background-color: transparent;
   border: 3px solid rgba(0, 0, 0, 0.1);
   font-weight: 900;
   font-size: 18px;
   color: rgba(0, 0, 0, 0.2);
}

.button.login {
   margin-top: 15px;
}
.button {
   margin-top: 20px;
}

.button button {
   background-color: #fff;
   color: #ED2553;
   border: none;
}

.button.login button.active {
   border: 3px solid transparent;
   color: #fff !important;
}



/*鼠标悬浮到登录的样式*/
.button.login button:hover {
   color: #ED2553;
   border-color: #ED2553;
}

.button {
   margin: 40px 0;
   overflow: hidden;
   z-index: 2;
}

.button button {
   cursor: pointer;
   position: relative;
   z-index: 2;
}

/*忘记密码的样式*/
.pass-forgot {
   width: 100%;
   float: left;
   text-align: center;
   color: rgba(0, 0, 0, 0.4);
   font-size: 18px;
}
.loginvip{
   width: 80%;
   float: left;
   text-align: right;
   margin-top: -35px;
   margin-left: 50px;
   color: rgba(0, 0, 0, 0.4);
   font-size: 18px;
}


/*
   园块区域
*/
.alt-2 {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   background: #6385a3;
   position: absolute;
   top: 40px;
   right: -70px;
   cursor: pointer;
   z-index: 100;
   transform: translate(0%, 0%);
   -webkit-transform: translate(0%, 0%);
}



/*
为.alt-2类的元素添加了一个过渡效果（transition）。
过渡效果允许CSS属性值在一定时间内平滑地变化，而不是瞬间跳变。
*/
.alt-2 {
   transition: all 0.5s; /* 示例，具体时间根据需求调整 */
}


/*    横这的那个线*/
.material-button .shape:before,
.alt-2 .shape:before {
   width: 25px;
   height: 4px;
}
/*    竖着这的那个线*/
.material-button .shape:after,
.alt-2 .shape:after {
   height: 25px;
   width: 4px;
}
/*       按钮的中间的”+“*/
.material-button .shape:before,
.alt-2 .shape:before,
.material-button .shape:after,
.alt-2 .shape:after {
   content: "";
   background: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   /*    调整+的位置 */
   transform: translate(-50%, -50%) rotate(360deg);
   -webkit-transform: translate(-50%, -50%) rotate(360deg);
   -ms-transform: translate(-50%, -50%) rotate(360deg);
}


/*
      注册的
*/
/*
园块区域
*/
.alt-1 {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   background: #6385a3;
   position: absolute;
   top: 40px;
   right: -70px;
   cursor: pointer;
   z-index: 100;
   transform: translate(0%, 0%);
   -webkit-transform: translate(0%, 0%);
}
/*
为.alt-2类的元素添加了一个过渡效果（transition）。
过渡效果允许CSS属性值在一定时间内平滑地变化，而不是瞬间跳变。
*/
.alt-1 {
   transition: all 0.5s; /* 示例，具体时间根据需求调整 */
}

/*    横这的那个线*/
.material-button-re .shape:before,
.alt-1 .shape:before {
   width: 25px;
   height: 4px;
}
/*    竖着这的那个线*/
/*.material-button-re .shape:after,*/
/*.alt-1 .shape:after {*/
/*   height: 25px;*/
/*   width: 4px;*/
/*}*/
/*       按钮的中间的”+“*/
.material-button-re .shape:before,
.alt-1 .shape:before,
.material-button-re .shape:after,
.alt-1 .shape:after {
   content: "";
   background: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   /*    调整+的位置 */
   transform: translate(-50%, -50%) rotate(360deg);
   -webkit-transform: translate(-50%, -50%) rotate(360deg);
   -ms-transform: translate(-50%, -50%) rotate(360deg);
}





/**/


/*    input的延时0.3s展示滑动*/
.input label,
.spin {
   transition: all 0.3s ease;
}

/*       背景图*/
.loginbg {
   /*background-image: url(/src/assets/imgs/bg.png);*/
   background-image: url(src/assets/imgs/bg.png);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   min-height: 100vh;
   font-family: 'Roboto', sans-serif;
}

body,
html {
   overflow: hidden;
}
.materialContainer {
   width: 100%;
   max-width: 460px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}



*,
*:after,
*::before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   /*移除了所有元素的文本装饰，通常用于去除超链接的下划线，保证页面的简洁性。*/
   text-decoration: none;
   /*去除了列表项的默认标记（如圆点或数字），使得自定义样式更加灵活。*/
   list-style-type: none;
   /*移除了元素在获得焦点时的轮廓（如点击链接或输入框被选中时的边框）*/
   outline: none;
}